<template>
    <div class="userinfo">
        <navbar></navbar>
        <div class="background">
            <van-uploader class="uploading" :after-read="afterRead" preview-size="100vw"/>
            <img v-if="user.background" :src="user.background">
            <img v-else src="../assets/bannerTop_new.png">
        </div>
        <userdetails></userdetails>
        <user-article></user-article>
    </div>
</template>

<script>
    import navbar from "@/components/common/navbar";
    import userdetails from "@/components/UserComponents/userdetails";
    import UserArticle from "@/components/UserComponents/userArticle";

    export default {
        components: {UserArticle, navbar, userdetails},

        data() {
            return {
                model: {},
                user: []
            }
        },
        mounted: async function () {

            const res = await this.$http.get("/user/userinfo")
            const user = res.data.data
            this.user = user
            if (res.data.data.img) {
                // user.img = this.$http.baseURL + "/" + res.data.data.img
                user.img = res.data.data.img

                if (res.data.data.background) {
                    // user.background = this.$http.baseURL + "/" + res.data.data.background
                    user.background = res.data.data.background

                    localStorage.setItem("user", user.toString())
                } else {
                    localStorage.setItem("user", user.toString())
                }
            }

            localStorage.setItem("user", JSON.stringify(user))
        },
        methods: {
            afterRead(file) {
                const formData = new FormData()
                formData.append("file", file.file)
                this.$http.post("/upload/uploadBackground", formData).then((res) => {
                    if (res.data.code == 0) {
                        this.$msg.success(res.data.message)
                        this.user.background = res.data.background
                    } else {
                        this.$msg.fail(res.data.message)
                    }
                    this.refreshData()
                })
            },
        }
    }
</script>

<style lang="less">
    .userinfo {
        .background {
            height: 41.67vw;
            position: relative;
            overflow: hidden;

            .uploading {
                position: absolute;
                opacity: 0;
            }

            img {
                width: 100%;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
</style>